import React, { useEffect } from 'react';
import { Form, Row, Col, Input, Button, Space ,InputNumber } from 'dw-mx';
import { Rule } from 'dw-mx-extend';

export default function ValidateDemo() {
    const [form] = Form.useForm();

    const layout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
    };

    const validateChinese = () =>{
        return ({ getFieldValue }) => ({
            validator(rule, value) {
                if (!value) {
                    return Promise.resolve();
                }
                if (!/^[\u4E00-\u9FA5]+$/.test(value)) {
                    return Promise.reject('只可以填中文，请检查！');
                }
                return Promise.resolve();
            },
        });
    }

    return (
        <>
            <Form form={form} {...layout} layout={'horizontal'}>
                <Row>
                    <Col span={8}>
                        <Form.Item label="身份证" name="sfz" rules={[Rule.IDCardRule()]}>
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label="身份证+必填" name="sfz-required" rules={[{ required: true }, Rule.IDCardRule()]}>
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label="邮箱" name="email" rules={[Rule.EmailRule()]}>
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label="移动电话" name="mobilephone" rules={[Rule.MobilePhoneRule()]}>
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label="固定电话" name="telephone" rules={[Rule.TelephoneRule()]}>
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label="邮政编码" name="zipcode" rules={[Rule.ZipCodeRule()]}>
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label="IP" name="ip" rules={[Rule.IPRule()]}>
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label="中英文" name="chneng" rules={[Rule.ChnEngRule()]}>
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label="中英文数字" name="chnengnum" rules={[Rule.ChnengNumberRule()]}>
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label="中文" name="chinese" rules={[validateChinese()]}>
                            <Input />
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        </>
    );
}
